<template>
    <div class='data-type-container'>
        <div class='item' :class='{selected : value == 0}' @click='select(0)'>当日</div>
        <div class='item' :class='{selected : value == 1}' @click='select(1)'>7日</div>
        <div class='item' :class='{selected : value == 2}' @click='select(2)'>30日</div>
    </div>
</template>

<script lang='ts'>
    import { defineComponent, nextTick, toRef } from "vue";
    export default defineComponent({
        props : {
            modelValue : {
                type : Number,
                default : 0
            }
        },

        setup(props, context) {
            const value = toRef(props, 'modelValue')
            function select(type:number) {
                context.emit('update:modelValue', type)
                nextTick(() => {
                    context.emit('change', type)
                })
            }

            return {
                value,
                select
            }
        }
    })
</script>

<style scoped lang='scss'>
    $color:#6996f4;
    .data-type-container{
        font-size: 0;
        .item{
            line-height: 22px;
            display: inline-block;
            width: 45px;
            text-align: center;
            border: 1px solid $color;
            font-size: 10px;
            cursor: pointer;
            border-radius: 12px;
            color: $color;

            margin-left: 10px;
            &:first-child{
                margin-left: 0;
            }

            &.selected{
                color: #fff;
                background: $color;
            }
        }
    }
</style>